<template>
	<div class="dianji">
		<view class="top1" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>

		<div class="zhangjie">
			<div class="text" style="display: flex;justify-content: center;">
				<p class="content" v-html="shiciList"></p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				title: "",
				desc: "",
				top: false,

				shiciList:"",
			}
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
				this.top = true
			} else {
				this.top = false
			}
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "千字文",
				imageUrl: 'https://www.leedong.top/img/11556.png'
			}
		
		},
		//2.分享到朋友圈
		onShareTimeline() {
		
			return {
				title: "千字文",
				imageUrl: 'https://www.leedong.top/img/11556.png'
		
			}
		},
		onLoad() {
			
			 this.list()
		},
		
		methods: {

			async list() {
				const data = await this.$api.qianziwen({
				});
				this.shiciList = data.rows;
				
			},
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},

		}
	}
</script>

<style lang="scss">
	.dianji {


		.zhangjie {
			margin-top: 10px;
			border-bottom: 1px solid #f5f5f5;

			.title {
				font-size: 28rpx;
				font-weight: 800;
				color: #000;
				padding-left: 10px;
			}

			.content {
				font-size: 35rpx;
				padding-top: 10rpx;
				width: 200px;
				flex-wrap: wrap;
				line-height: 35px;
				color: #616161;
				padding-bottom: 20rpx;
				margin: 20px;
			}
			.sixiang{
				span{
					font-size: 28rpx;
					font-weight: 800;
					color: #7d8468;
					padding-left: 10px;
				}
				p{
					font-size: 28rpx;
					padding-top: 10rpx;
					line-height: 20px;
					text-indent: 4ch;
					color: #616161;
					padding-bottom: 20rpx;
					margin: 20px;
				}
			}
			
		}
	}
</style>